<template>
  <div class="menu-wrapper" style="width:200px;">
    <!-- 只有一层菜单 -->
    <template v-for="(navItem) in routes">
      <el-menu-item
        :key="navItem.name"
        v-if="!navItem.children&&navItem.title "
        :index="navItem.path"
        :route="navItem.path"
        collapse
      >
        <!-- <i v-if="navItem.level =='1'" class="el-icon-menu"></i> -->
        <img
          v-if="navItem.level =='1'"
          style="margin-right:5px"
          class="menuIcon"
          src="../../assets/menuIcon.png"
          alt
        >
        <span slot="title">{{navItem.title}}</span>
      </el-menu-item>

      <!-- 有子菜单 -->
      <el-submenu :key="navItem.name" v-if="navItem.children" :index="navItem.name">
        <template slot="title">
          <!-- <i v-if="navItem.level =='1'" class="el-icon-menu"></i> -->
          <img
            v-if="navItem.level =='1'"
            style="margin-right:5px"
            class="menuIcon"
            src="../../assets/menuIcon.png"
            alt
          >
          <i v-else class="el-icon-plus"></i>
          <span>{{navItem.title}}</span>
        </template>
        <!-- 递归 -->
        <MenuItem :routes="navItem.children"></MenuItem>
      </el-submenu>
    </template>
  </div>
</template>
<script>
export default {
  name: "MenuItem",
  props: ["routes"],
  data() {
    return {
      nowNav: ""
    };
  },
  created() {
    // console.log(this.routes, "获取");
  }
};
</script>
